<template>
    <div>

        <!--        条件输入信息框     -->
        <el-card style="width: 100%; height: 10vh;">
            <el-form :inline="true">

                <el-form-item label="标题" label-width="40px">
                    <el-input style="width: 175px" clearable v-model="searchTitle" placeholder="请输入标题"></el-input>
                </el-form-item>

                <el-form-item label="内容" label-width="40px">
                    <el-input style="width: 175px" clearable v-model="searchDetail"
                              placeholder="请输入内容"></el-input>
                </el-form-item>

                <el-form-item label="发布时间" label-width="80px">
                    <el-date-picker
                            style="width: 250px"
                            v-model="searchTime"
                            type="daterange"
                            align="right"
                            unlink-panels
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptionsSearch">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="状态" label-width="40px">
                    <el-select style="width: 220px" v-model="searchStatus" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in statuss"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-button type="primary" @click="searchByManyCondition" plain size="small "> 搜 索
                </el-button>
                <el-button @click="resetCondition" plain
                           size="small "> 重 置
                </el-button>
            </el-form>
        </el-card>

        <!--                        轮播图信息表格        -->
        <el-card style="width: 100%; ">

            <!--         轮播图信息    标题-->
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;font-size: 18px">轮播图信息</span>
                <el-button style="float: right;margin-right: 10px" type="danger" @click="deleteSelectCarousels">
                    删除选中
                </el-button>
                <el-button style="float: right;margin-right: 20px" type="primary" plain @click="showAddCarousel">
                    添加轮播图
                </el-button>
                <el-button style="float: right;margin-right: 10px" type="primary" plain @click="selectAll"> 查询所有轮播图
                </el-button>


                <!-- 添加轮播图信息的弹窗 -->
                <el-dialog title="添加轮播图" :visible.sync="dialogVisible_addCarousel">
                    <el-form :model="add_carousel" size="medium" :rules="rules" ref="addCarouselRef">

                        <el-form-item prop="title" label="标题" label-width="100px">
                            <el-input v-model="add_carousel.title" placeholder="请输入标题"></el-input>
                        </el-form-item>

                        <el-form-item prop="detail" label="内容" label-width="100px">
                            <el-input type="textarea" v-model="add_carousel.detail" placeholder="请输入内容"
                                      style="width: 482px;margin-left: 20px"></el-input>
                        </el-form-item>

                        <el-form-item prop="createTime" label="创建时间" label-width="100px">
                            <el-date-picker
                                    v-model="add_carousel.createTime"
                                    type="datetime"
                                    placeholder="选择发布日期时间"
                                    align="right"
                                    :picker-options="pickerOptionsAdd">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item prop="imageUrl" label="图片" label-width="100px">
                            <div style="display: flex;align-items: center;flex-direction: row;margin: 20px">
                                <el-avatar shape="square" :size="200" fit="fill"
                                           :src="add_carousel.imageUrl"></el-avatar>
                                <el-upload
                                        :show-file-list="false"
                                        :action="$baseUrl + '/file/upload'"
                                        :on-success="handleFileUploadImageAdd"
                                        style="margin-left: 50px"
                                >
                                    <el-button type="primary">上传图片</el-button>
                                </el-upload>
                            </div>

                        </el-form-item>

                        <el-form-item prop="linkUrl" label="跳转路径" label-width="100px">
                            <el-input v-model="add_carousel.linkUrl" placeholder="请输入跳转路径"></el-input>
                        </el-form-item>

                        <el-form-item prop="status" label="状态" label-width="100px">
                            <el-select v-model="add_carousel.status" placeholder="请选择状态">
                                <el-option
                                        v-for="item in statuss"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>

                    </el-form>


                    <div slot="footer" class="dialog-footer">
                        <el-button type="warning" @click="resetAddCarousel"> 重 置</el-button>
                        <el-button @click="cancelDialog_addCarousel"> 取 消</el-button>
                        <el-button type="primary" @click="handleEdit_addCarousel"> 确 定</el-button>
                    </div>

                </el-dialog>


                <!-- 删除轮播图信息的弹窗 -->
                <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible_deleteSelect"
                        width="30%">
                    <span>真的要删除选中的所有信息吗？</span>
                    <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisible_deleteSelect = false">取 消</el-button>
                                    <el-button type="danger" @click="handleDeleteCarousels">确 定</el-button>
                                </span>
                </el-dialog>


            </div>


            <!--     轮播图信息列表    展示-->
            <template>
                <el-table height="362"
                          :header-cell-style="{fontSize: '14px','text-align':'center'}"
                          :cell-style="{'text-align':'center'}"
                          :data="carousels"
                          @selection-change="handleSelectCodeForTicket"
                          stripe
                          style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column width="50" label="序号" type="index" align="center"></el-table-column>
                    <el-table-column prop="title" show-overflow-tooltip label="标题" width="100px"></el-table-column>
                    <el-table-column prop="detail" show-overflow-tooltip label="内容" width="250px"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="150px"></el-table-column>
                    <el-table-column label="状态" width="100">
                        <template slot-scope="scope">
                            <el-tag type="danger" effect="dark" v-if="scope.row.status==0">未启用</el-tag>
                            <el-tag type="success" effect="dark" v-if="scope.row.status==1">已启用</el-tag>
                        </template>
                    </el-table-column>
                    <!--      图片显示    -->
                    <el-table-column prop="imageUrl" label="图片" width="230px">
                        <template slot-scope="scope">
                            <el-avatar shape="square" :size="200" fit="fill" :src="scope.row.imageUrl"></el-avatar>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作">

                        <!--          编辑  +  删除   轮播图-->
                        <template slot-scope="scope">

                            <!--     编辑按钮    -->
                            <el-button type="primary" icon="el-icon-edit" circle
                                       @click="handleEditButton(scope.row)"></el-button>
                            <!--     删除按钮    -->
                            <el-button type="danger" icon="el-icon-delete" circle
                                       @click="handleDeleteButton(scope.row)"></el-button>


                            <!-- 删除轮播图信息的弹窗 -->
                            <el-dialog
                                    title="提示"
                                    :visible.sync="dialogVisible_delete"
                                    width="30%">
                                <span style="float: left">真的要删除这条信息吗？</span>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisible_delete = false">取 消</el-button>
                                    <el-button type="danger" @click="handleDeleteCarousel">确 定</el-button>
                                </span>
                            </el-dialog>

                            <!-- 编辑信息的弹窗 -->
                            <el-dialog title="修改轮播图信息" :visible.sync="dialogFormVisible_edit">
                                <el-form :model="form_carousel" size="medium" :rules="rules" ref="editCarouselRef">

                                    <el-form-item prop="title" label="标题" label-width="100px">
                                        <el-input v-model="form_carousel.title" placeholder="请输入标题"
                                                  style="float: left"></el-input>
                                    </el-form-item>

                                    <el-form-item prop="detail" label="内容" label-width="100px">
                                        <el-input type="textarea" v-model="form_carousel.detail"
                                                  placeholder="请输入内容"
                                                  style="width: 492px;float: left;margin-left: 20px"></el-input>
                                    </el-form-item>

                                    <el-form-item prop="createTime" label="创建时间" label-width="100px">
                                        <el-date-picker
                                                style="float: left;"
                                                v-model="form_carousel.createTime"
                                                type="datetime"
                                                placeholder="选择发布日期时间"
                                                align="right"
                                                :picker-options="pickerOptionsAdd">
                                        </el-date-picker>
                                    </el-form-item>

                                    <el-form-item prop="imageUrl" label="图片" label-width="100px">
                                        <div style="display: flex;align-items: center;flex-direction: row;margin: 20px">
                                            <el-avatar shape="square" :size="200" fit="fill"
                                                       :src="form_carousel.imageUrl"></el-avatar>
                                            <el-upload
                                                    :show-file-list="false"
                                                    :action="$baseUrl + '/file/upload'"
                                                    :on-success="handleFileUploadImageEdit"
                                                    style="margin-left: 50px"
                                            >
                                                <el-button type="primary">上传图片</el-button>
                                            </el-upload>
                                        </div>

                                    </el-form-item>

                                    <el-form-item prop="linkUrl" label="跳转路径" label-width="100px">
                                        <el-input v-model="form_carousel.linkUrl"
                                                  placeholder="请输入跳转路径"
                                                  style="float: left"></el-input>
                                    </el-form-item>

                                    <el-form-item prop="status" label="状态" label-width="100px">
                                        <el-select style="float: left" v-model="form_carousel.status"
                                                   placeholder="请选择状态">
                                            <el-option
                                                    v-for="item in statuss"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                </el-form>

                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="cancelDialog_editCarousel">取 消</el-button>
                                    <el-button type="primary" @click="handleEdit">确 定</el-button>
                                </div>

                            </el-dialog>
                        </template>
                    </el-table-column>

                    <el-table-column label="状态快捷操作" width="120px">
                        <template slot-scope="scope">
                            <!--    启用开关    -->
                            <el-switch
                                    style="margin-left: 20px"
                                    v-model="scope.row.status"
                                    :active-value="1"
                                    :inactive-value="0"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    @change='changeStatus(scope.row.id,scope.row.status)'
                            >
                            </el-switch>
                        </template>
                    </el-table-column>

                </el-table>

            </template>

            <el-pagination
                    style="float: right;margin: 20px 0"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next"
                    background
                    :total="total">
            </el-pagination>
        </el-card>

    </div>
</template>

<script>
import {defineComponent} from 'vue'
import dateUtil from '@/utils/dateUtil';
import crypto from "@/utils/encryp";

export default defineComponent({
    name: "Carousel",
    data() {
        return {
            dialogFormVisible_edit: false,          // 编辑按钮弹出框
            dialogVisible_delete: false,            // 删除按钮弹出框
            dialogVisible_deleteSelect: false,      // 选中删除按钮弹出框
            dialogVisible_addCarousel: false,         // 添加轮播图按钮弹出框

            carousels: [],          // 存储系统通知

            form_carousel: {},          // 存储当前操作的轮播图
            add_carousel: {},            // 存储添加的轮播图信息

            deleteId: '',             // 存储要删除的id
            deleteIds: [],            // 存储被选中轮播图的id

            currentPage: 1,           // 当前页码
            pageSizes: [5, 10, 50, 100], // 每页显示条数
            pageSize: 5,              // 每页显示条数
            total: 0,                 // 轮播图总数

            searchTitle: '',           // 存储搜索的标题
            searchDetail: '',         // 存储搜索的内容
            searchStatus: '',          // 存储搜索的状态
            searchTime: '',           // 存储搜素的时间
            startTime: '',            // 存储开始时间
            endTime: '',              // 存储结束时间

            // 搜素的日期选择器
            pickerOptionsSearch: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            // 添加弹窗的时间选择器
            pickerOptionsAdd: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            // 修改弹窗的时间选择器
            pickerOptionsEdit: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },

            // 存储所有状态
            statuss: [{
                value: 0,
                label: '未启用'
            }, {
                value: 1,
                label: '已启用'
            }],

            // 输入校验规则
            rules: {
                title: [
                    {required: true, message: '请输入标题', trigger: 'blur'},
                    {min: 2, message: '标题最少为2个字符', trigger: 'blur'}
                ],
                detail: [
                    {required: true, message: '请填写介绍', trigger: 'blur'}
                ],
                createTime: [
                    {required: true, message: '请选择日期', trigger: 'change'}
                ],
                imageUrl: [
                    {required: true, message: '请传入图片', trigger: 'blur'}
                ],
                linkUrl: [
                    {required: true, message: '请填写跳转路径', trigger: 'blur'}
                ],
                status: [
                    {required: true, message: '请选择状态', trigger: 'blur'}
                ],
            }
        }
    },


    mounted() {
        this.$request.get('/carousel/selectByPage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize).then(res => {
            if (res.code === '200') {
                this.carousels = res.data.list;
                this.total = res.data.total;
                console.log(this.carousels)
            } else {
                this.$message.error(res.msg);
            }
        })
    },

    methods: {

        // 启动开关的回调方法
        changeStatus(id, status) {
            console.log(id)
            console.log(status)
            // 发送请求
            this.$request.post('/carousel/updateStatus?id=' + id + '&status=' + status).then(res => {
                if (res.code === '200') {
                    this.$message.success('状态修改成功！');
                } else {
                    this.$message.error(res.msg);
                }
            })
        },


        // 移除表单的校验
        clearcheck(formName) {
            if (this.$refs[formName]) {
                this.$refs[formName].clearValidate()
            }
        },

        // 处理 轮播图图片上传按钮   的点击事件
        handleFileUploadImageAdd(response, file, fileList) {
            // 判断上传的文件的类型
            // 只能上传图片类型，如果不是图片资源那么提示“只能上传图片！！”
            if (!file.raw.type.includes('image')) {
                this.$message.error('只能上传图片！')
                return
            }
            if (response.data) {
                // 数据解密
                let key = "dianzishumaMall0"; //加密密钥
                let iv = "dianzishumaMall0"; //加密aesIV，偏移量

                const data = crypto.decryptAES(response.data, key, iv)
                response.data = JSON.parse(data)
            }
            //  1. 获取上传成功后返回的图片地址
            let url = response.data;
            // 2. 修改表单中对应的字段值
            this.add_carousel.imageUrl = url
            // 刷新图片信息
            this.$forceUpdate()
        },

        // 处理 轮播图图片上传按钮   的点击事件
        handleFileUploadImageEdit(response, file, fileList) {
            // 判断上传的文件的类型
            // 只能上传图片类型，如果不是图片资源那么提示“只能上传图片！！”
            if (!file.raw.type.includes('image')) {
                this.$message.error('只能上传图片！')
                return
            }
            if (response.data) {
                // 数据解密
                let key = "dianzishumaMall0"; //加密密钥
                let iv = "dianzishumaMall0"; //加密aesIV，偏移量

                const data = crypto.decryptAES(response.data, key, iv)
                response.data = JSON.parse(data)
            }
            //  1. 获取上传成功后返回的图片地址
            let url = response.data;
            // 2. 修改表单中对应的字段值
            this.form_carousel.imageUrl = url
            // 刷新图片信息
            this.$forceUpdate()
        },


        // 获取所有的轮播图信息
        selectAll() {
            this.$request.get('/carousel/selectByPage?currentPage=1&pageSize=5').then(res => {
                if (res.code === '200') {
                    this.carousels = res.data.list;
                    this.total = res.data.total;
                    this.$message
                        .success("获取轮播图信息成功！")
                } else {
                    this.$message.error(res.msg)
                }
            })
        },

        // 重置查询条件
        resetCondition() {
            // 重置查询条件
            this.searchTitle = ''
            this.searchDetail = ''
            this.searchStatus = ''
            this.searchTime = ''
            this.startTime = ''
            this.endTime = ''
            //  重新查询
            this.searchByManyCondition()
            this.$message.success('重置成功')
        },

        // 条件查询
        searchByManyCondition() {
            if (this.searchTime === null) {
                this.searchTime = ''
            }

            // 处理时间段信息
            if (this.searchTime !== '') {
                this.startTime = dateUtil.formatDate(this.searchTime[0])
                this.endTime = dateUtil.formatDate(this.searchTime[1])
            } else {
                this.startTime = '1000-01-01 00:00:00'
                this.endTime = '9999-12-31 23:59:59'
            }

            if (this.searchStatus !== '' && this.searchStatus !== null && this.searchStatus !== undefined) {
                this.searchStatus = parseInt(this.searchStatus)
                this.$request.get('/carousel/selectByManyConditionInPage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&title=' + this.searchTitle + '&detail=' + this.searchDetail + '&startTime=' + this.startTime + '&endTime=' + this.endTime + '&status=' + this.searchStatus).then(res => {
                    this.startTime = this.startTime === '' ? '' : this.startTime
                    this.endTime = this.endTime === '' ? '' : this.endTime
                    if (res.code === '200') {
                        this.carousels = res.data.list
                        this.total = res.data.total
                        this.$message
                            .success('查询成功')
                    } else {
                        this.$message.error(res.msg)
                    }
                })

            } else {
                this.$request.get('/carousel/selectByManyConditionNoStatusInPage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&title=' + this.searchTitle + '&detail=' + this.searchDetail + '&startTime=' + this.startTime + '&endTime=' + this.endTime).then(res => {
                    this.startTime = this.startTime === '' ? '' : this.startTime
                    this.endTime = this.endTime === '' ? '' : this.endTime
                    if (res.code === '200') {
                        this.carousels = res.data.list
                        this.total = res.data.total
                        this.$message
                            .success('查询成功')
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            }


        },

        // 条件查询 无提示
        searchByManyConditionNoMsg() {
            if (this.searchTime === null) {
                this.searchTime = ''
            }

            // 处理时间段信息
            if (this.searchTime !== '') {
                this.startTime = dateUtil.formatDate(this.searchTime[0])
                this.endTime = dateUtil.formatDate(this.searchTime[1])
            } else {
                this.startTime = '1000-01-01 00:00:00'
                this.endTime = '9999-12-31 23:59:59'
            }

            if (this.searchStatus !== '' && this.searchStatus !== null && this.searchStatus !== undefined) {
                this.searchStatus = parseInt(this.searchStatus)
                this.$request.get('/carousel/selectByManyConditionInPage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&title=' + this.searchTitle + '&detail=' + this.searchDetail + '&startTime=' + this.startTime + '&endTime=' + this.endTime + '&status=' + this.searchStatus).then(res => {
                    this.startTime = this.startTime === '' ? '' : this.startTime
                    this.endTime = this.endTime === '' ? '' : this.endTime
                    if (res.code === '200') {
                        this.carousels = res.data.list
                        this.total = res.data.total
                        this.$message
                    } else {
                        this.$message.error(res.msg)
                    }
                })

            } else {
                this.$request.get('/carousel/selectByManyConditionNoStatusInPage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&title=' + this.searchTitle + '&detail=' + this.searchDetail + '&startTime=' + this.startTime + '&endTime=' + this.endTime).then(res => {
                    this.startTime = this.startTime === '' ? '' : this.startTime
                    this.endTime = this.endTime === '' ? '' : this.endTime
                    if (res.code === '200') {
                        this.carousels = res.data.list
                        this.total = res.data.total
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            }


        },

        // 重置添加轮播图信息按钮
        resetAddCarousel() {
            this.add_carousel = {}
            this.clearcheck('addCarouselRef')
        },

        // 取消添加轮播图
        cancelDialog_addCarousel() {
            this.dialogVisible_addCarousel = false;
        },


        // 添加轮播图
        handleEdit_addCarousel() {

            // 处理时间段信息
            this.add_carousel.createTime = dateUtil.formatDate(this.add_carousel.createTime)

            this.$refs['addCarouselRef'].validate((valid) => {
                if (valid) {
                    // 校验通过
                    // 初始时间格式
                    this.$request.post('/carousel/addCarousel', this.add_carousel).then(res => {
                        // 关闭弹窗
                        this.dialogVisible_addCarousel = false;
                        this.add_carousel = {}
                        if (res.code === '200') {
                            this.$message.success('添加成功')
                            // 刷新页面
                            this.selectByPage()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                } else {
                    this.$message.error('请输入完整信息')
                }
            })
        },

        // 分页查找
        selectByPage() {
            this.$request.get('/carousel/selectByPage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize).then(res => {
                if (res.code === '200') {
                    this.carousels = res.data.list;
                    this.total = res.data.total;
                } else {
                    this.$message.error(res.msg);
                }
            })
        },

        // currentPage 改变时会触发
        handleCurrentChange(val) {
            // 获取  当前页 和 页面大小  currentPage、pageSize
            this.currentPage = val;

            // 发送请求获取相应数量的数据

            this.searchByManyConditionNoMsg()
        },

        //  pageSize 改变时会触发
        handleSizeChange(val) {
            // 获取  当前页 和 页面大小  currentPage、pageSize
            this.pageSize = val;
            this.currentPage = 1;

            // 发送请求获取相应数量的数据
            this.searchByManyConditionNoMsg()
        },

        // 删除选中二次提醒
        deleteSelectCarousels() {
            // 显示二次提醒弹窗
            this.dialogVisible_deleteSelect = true;
        },

        // 显示添加用户的弹出框
        showAddCarousel() {
            this.dialogVisible_addCarousel = true;
            this.clearcheck('addCarouselRef')
        },

        // 删除选中二次确认
        handleDeleteCarousels() {
            this.dialogVisible_deleteSelect = false;
            if (this.deleteIds.length > 0) {
                // 删除选中
                this.$request.post('/carousel/deleteByIds', this.deleteIds).then(res => {
                    if (res.code === '200') {
                        this.$message.success('删除成功');
                        // 刷新数据
                        // 处理时间段信息
                        if (this.searchTime === null) {
                            this.searchTime = ''
                        }
                        if (this.searchTime !== '') {
                            this.startTime = dateUtil.formatDate(this.searchTime[0])
                            this.endTime = dateUtil.formatDate(this.searchTime[1])
                        } else {
                            this.startTime = '1000-01-01 00:00:00'
                            this.endTime = '9999-12-31 23:59:59'
                        }

                        this.searchByManyConditionNoMsg()
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            } else {
                this.$message.info('请选择要删除的用户');
            }

        },


        // 获取选中的用户id，
        // 并存储到 ids 数组中
        handleSelectCodeForTicket(val) {
            this.deleteIds = val.map((item) => item.id);
        },

        // 显示 修改轮播图信息    弹窗
        handleEditButton(carousel) {
            // 将当前行的数据传入form中
            this.form_carousel = JSON.parse(JSON.stringify(carousel));
            this.edit_createTime = JSON.parse(JSON.stringify(carousel.createTime));
            // 显示弹窗
            this.dialogFormVisible_edit = true;
            this.clearcheck('editCarouselRef')
            console.log(this.form_carousel)
        },

        // 删除按钮二次提醒
        handleDeleteButton(carousel) {
            this.dialogVisible_delete = true
            this.deleteId = carousel.id
        },


        // 删除当前轮播图
        handleDeleteCarousel() {
            this.dialogVisible_delete = false;

            this.$request.delete('/carousel/deleteById/' + this.deleteId).then(res => {
                if (res.code === '200') {
                    this.$message.success('删除成功');
                    this.deleteId = ''
                    // 重新加载数据
                    // 处理时间段信息
                    if (this.searchTime === null) {
                        this.searchTime = ''
                    }
                    if (this.searchTime !== '') {
                        this.startTime = dateUtil.formatDate(this.searchTime[0])
                        this.endTime = dateUtil.formatDate(this.searchTime[1])
                    } else {
                        this.startTime = '1000-01-01 00:00:00'
                        this.endTime = '9999-12-31 23:59:59'
                    }

                    this.searchByManyConditionNoMsg()
                } else {
                    this.$message.error(res.msg);
                }
            })
        },

        // 取消修改信息
        cancelDialog_editCarousel() {
            this.dialogFormVisible_edit = false;
            this.form_carousel = {}
            this.clearcheck('editCarouselRef')
        },


        // 修改轮播图信息
        handleEdit() {
            this.dialogFormVisible_edit = false;
            // 处理时间段信息
            if (this.form_carousel.createTime !== this.edit_createTime) {
                this.form_carousel.createTime = dateUtil.formatDate(this.form_carousel.createTime)
            }
            // 输入检验
            this.$refs['editCarouselRef'].validate((valid) => {
                if (valid) {
                    // 校验通过
                    this.$request.put('/carousel/updateById', this.form_carousel).then(res => {
                        console.log(res)
                        if (res.code === '200') {
                            this.$message.success('修改成功');
                            this.form_carousel = {}
                            // 处理时间段信息
                            if (this.searchTime !== '') {
                                this.startTime = dateUtil.formatDate(this.searchTime[0])
                                this.endTime = dateUtil.formatDate(this.searchTime[1])
                            } else {
                                this.startTime = '1000-01-01 00:00:00'
                                this.endTime = '9999-12-31 23:59:59'
                            }
                            this.searchByManyConditionNoMsg()
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                } else {
                    this.$message.error('请输入完整信息')
                }
            })


        }


    }
})
</script>

<style scoped>

</style>